<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item>
        <el-button :disabled="roles !== '系统管理员'" type="primary" icon="el-icon-plus" @click="addDialog">新增</el-button>
      </el-form-item>
      <el-form-item label="学院">
        <el-select v-model="form.dormitoryCollegeName" placeholder="请选择学院">
          <el-option v-for="collegeName in collegeNameList" :key="collegeName" :label="collegeName" :value="collegeName" />
        </el-select>
      </el-form-item>
      <el-form-item label="宿舍楼">
        <el-select v-model="form.dormitoryBuild" placeholder="请选择宿舍楼(栋)">
          <el-option v-for="buildName in buildNameList" :key="buildName" :label="buildName" :value="buildName" />
        </el-select>
      </el-form-item>
      <el-form-item label="宿舍编号" >
        <el-input v-model="form.dormitoryNo" placeholder="请输入宿舍编号"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getStudentDormitoryList()">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      border>
      <el-table-column
        fixed
        type="index"
        label="序号"
        align="center"
        width="100"/>
      <el-table-column
        prop="dormitoryCollegeName"
        label="学院名称"
        align="center"
        width="180"/>
      <el-table-column
        prop="dormitoryBuildName"
        label="宿舍楼(栋)"
        align="center"
        width="120"/>
      <el-table-column
        prop="dormitoryNo"
        label="宿舍编号"
        align="center"
        width="120"/>
      <el-table-column
        prop="dormitoryManager"
        label="宿舍长"
        align="center"
        width="120"/>
      <el-table-column
        prop="dormitoryType"
        label="宿舍类型"
        align="center"
        width="120"/>
      <el-table-column
        prop="dormitoryBuildManager"
        label="宿舍楼管理员"
        align="center"
        width="150"/>
      <el-table-column
        prop="dormitoryStatus"
        label="宿舍状态"
        align="center"
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.dormitoryStatus == 0" type="success">
            未满
          </el-tag>
          <el-tag v-else type="danger">
            已满
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="335">
        <template slot-scope="scope">
          <el-button type="info" size="small" icon="el-icon-view" @click="getDetail(scope.row)">查看</el-button>
          <el-button :disabled="roles !== '系统管理员'" type="primary" size="small" icon="el-icon-edit" style="margin-left: 0px" @click="editStudentDormitory(scope.row)">编辑</el-button>
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="您确定要删除吗？"
            @confirm="deleteStudentDormitory(scope.row.dormitoryId)"
          >
            <el-button slot="reference" :disabled="roles !== '系统管理员'" type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--    新增对话框-->
    <el-dialog
      :visible.sync="addDialogVisible"
      :before-close="handleClose"
      title="新增学生宿舍"
      width="400px">
      <el-form :model="addForm">
        <el-form-item label="宿舍编号" style="margin-left: 20px">
          <el-input v-model="addForm.dormitoryNo" placeholder="请输入宿舍编号" style="width: 200px;margin-left: 28px"/>
        </el-form-item>
        <el-form-item label="学院" style="margin-left: 20px">
          <el-select v-model="addForm.dormitoryCollegeName" placeholder="请选择学院" style="margin-left: 55px;width: 200px">
            <el-option v-for="collegeName in collegeNameList" :key="collegeName" :label="collegeName" :value="collegeName" />
          </el-select>
        </el-form-item>
        <el-form-item label="宿舍楼" style="margin-left: 20px">
          <el-select v-model="addForm.dormitoryBuildName" placeholder="请选择宿舍楼" style="margin-left: 42px;width: 200px">
            <el-option v-for="buildName in buildNameList" :key="buildName" :value="buildName" :label="buildName" />
          </el-select>
        </el-form-item>
        <el-form-item label="宿舍长" style="margin-left: 20px" >
          <el-input v-model="addForm.dormitoryManager" placeholder="请输入宿舍长" style="width: 200px;margin-left: 42px"/>
        </el-form-item>
        <el-form-item label="宿舍楼管理员" style="margin-left: 20px">
          <el-input v-model="addForm.dormitoryBuildManager" placeholder="请输入宿舍楼管理员" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="宿舍类型" style="margin-left: 20px">
          <el-select v-model="addForm.dormitoryType" placeholder="请选择宿舍类型" style="margin-left: 27px;width: 200px">
            <el-option v-for="dormitoryType in dormitoryTypeList" :key="dormitoryType" :label="dormitoryType" :value="dormitoryType"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDormitory">确 定</el-button>
      </span>
    </el-dialog>
    <!--    编辑对话框-->
    <el-dialog
      :visible.sync="updateDialogVisible"
      :before-close="handleClose"
      :title="updateTitle"
      width="400px">
      <el-form :model="updateForm">
        <el-form-item label="宿舍类型" style="margin-left: 20px">
          <el-select v-model="updateForm.dormitoryType" placeholder="请选择宿舍类型" style="margin-left: 28px;width: 200px">
            <el-option v-for="dormitoryType in dormitoryTypeList" :key="dormitoryType" :label="dormitoryType" :value="dormitoryType"/>
          </el-select>
        </el-form-item>
        <el-form-item label="宿舍长" style="margin-left: 20px">
          <el-input v-model="updateForm.dormitoryManager" placeholder="请输入宿舍长" style="width: 200px;margin-left: 42px"/>
        </el-form-item>
        <el-form-item label="宿舍楼管理员" style="margin-left: 20px">
          <el-input v-model="updateForm.dormitoryBuildManager" placeholder="请输入宿舍楼管理员" style="width: 200px"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--    查看对话框-->
    <el-dialog
      :visible.sync="detailDialogVisible"
      :before-close="handleClose"
      title="详细信息">
      <el-radio-group v-model="size">
        <el-radio label="">默认</el-radio>
        <el-radio label="medium">中等</el-radio>
        <el-radio label="small">小型</el-radio>
        <el-radio label="mini">超小</el-radio>
      </el-radio-group>
      <el-descriptions :column="2" :size="size" class="margin-top" border style="margin-top: 20px">
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"/>
            宿舍编号
          </template>
          {{ dormitoryDetail.dormitoryNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"/>
            所属宿舍楼
          </template>
          {{ dormitoryDetail.dormitoryBuildName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"/>
            所属学院名称
          </template>
          {{ dormitoryDetail.dormitoryCollegeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"/>
            宿舍长
          </template>
          {{ dormitoryDetail.dormitoryManager }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"/>
            宿舍类型
          </template>
          {{ dormitoryDetail.dormitoryType }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"/>
            宿舍楼管理员
          </template>
          {{ dormitoryDetail.dormitoryBuildManager }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"/>
            宿舍成员
          </template>
          {{ dormitoryDetail.dormitoryMember }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"/>
            宿舍状态
          </template>
          <el-tag v-if="dormitoryDetail.dormitoryStatus == 0" size="small" type="success">未满
          </el-tag>
          <el-tag v-else size="small" type="danger">已满
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <div class="pagination" style="margin-top: 20px">
      <el-pagination
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="total"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script>
import StudentDormitoryApi from '../../api/studentDormitory'
import CollegeApi from '../../api/college'
import BuildApi from '../../api/build'
import { mapGetters } from 'vuex'
export default {
  name: 'Dormitory',
  data() {
    return {
      tableData: [],
      collegeNameList: [],
      buildNameList: [],
      loading: true,
      dormitoryTypeList: ['三人寝', '四人寝', '五人寝'],
      form: {
        dormitoryBuild: '',
        dormitoryNo: '',
        dormitoryCollegeName: ''
      },
      addForm: {
        dormitoryNo: '',
        dormitoryCollegeName: '',
        dormitoryBuildName: '',
        dormitoryManager: '',
        dormitoryBuildManager: '',
        dormitoryType: ''
      },
      updateForm: {
        dormitoryType: '',
        dormitoryManager: '',
        dormitoryBuildManager: ''
      },
      pageNo: 1,
      pageSize: 5,
      total: 0,
      updateDialogVisible: false,
      addDialogVisible: false,
      updateTitle: '',
      detailDialogVisible: false,
      size: '',
      dormitoryDetail: {}
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    this.getStudentDormitoryList()
    this.getCollegeNames()
    this.getBuildNames()
  },
  methods: {
    editStudentDormitory(row) {
      this.updateDialogVisible = true
      this.updateTitle = '修改' + row.dormitoryBuildName + row.dormitoryNo + '宿舍信息'
      // 表单数据回显
      this.updateForm = row
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getStudentDormitoryList()
    },
    handleCurrentChange(val) {
      this.getStudentDormitoryList(val)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 删除宿舍信息
    deleteStudentDormitory(dormitoryId) {
      StudentDormitoryApi.deleteSDormitory(dormitoryId).then(response => {
        this.$notify({
          title: '成功',
          message: '这是一条宿舍删除成功的提示消息',
          type: 'success'
        })
        this.getStudentDormitoryList(1)
      }).catch(() => {
        this.$notify.error({
          title: '错误',
          message: '这是一条宿舍删除错误的提示消息'
        })
      })
    },
    // 重置搜索表单
    resetForm() {
      this.form.dormitoryBuild = ''
      this.form.dormitoryNo = ''
      this.form.dormitoryCollegeName = ''
    },
    // 分页查询学生宿舍列表
    getStudentDormitoryList(page = 1) {
      this.pageNo = page
      StudentDormitoryApi.getStudentDormitoryList(this.pageNo, this.pageSize, this.form).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
        this.tableData.forEach((item) => {
          item.dormitoryMember = item.dormitoryMember.toString()
        })
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].dormitoryBuildName += '栋'
        }
        this.loading = false
      }).catch(() => {
        this.$message.error('加载失败！')
      })
    },
    // 获取学院名称列表
    getCollegeNames() {
      CollegeApi.getCollegeList().then(response => {
        this.collegeNameList = response.data
      })
    },
    // 获取建筑名称列表
    getBuildNames() {
      BuildApi.getBuildNameList().then(response => {
        this.buildNameList = response.data
      })
    },
    addDialog() {
      this.addDialogVisible = true
      this.getCollegeNames()
      this.getBuildNames()
    },
    // 新增学生宿舍
    addDormitory() {
      StudentDormitoryApi.addSDormitory(this.addForm).then(response => {
        this.$message.success('添加成功！')
        this.getStudentDormitoryList(1)
      }).catch(() => {
        this.$message.error('添加失败，请重试！')
      })
      this.addDialogVisible = false
    },
    // 查看详情
    getDetail(row) {
      this.detailDialogVisible = true
      this.dormitoryDetail = row
    }
  }
}
</script>
<style>
.app-container{
  width: auto;
}
</style>
